{% extends "base.html" %}
{% load authorization_tags %}
{% load static %}

{% block content %}
    {{ block.super }}
    <div class="support-page-wrapper">
        <h2 style="color: #546474;">Options are available for teams of all sizes.</h2>
        <br />
        <div class="support-container">
            <div class="support-box">
                <div class="support-box shape community hover">
                    <h2 style="text-align: center;">Community Support</h2>
                    <div class="divider dark"></div>
                    <p>What's included:</p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Support from the community via OWASP Slack</p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Community-based discussion</p>
                </div>
                <a href="https://owasp.org/slack/invite" target="_blank" class="btn btn-primary community support dark">Join #defectdojo</a>
            </div>
            
            <div class="support-box">
                <div class="support-box shape hover commercial">
                    <h2 style="text-align: center;">Go Pro!</h2>
                    <div class="divider light"></div>
                    <p>What's included:</p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> New UI 
                       <i class="fa-solid fa-circle-question has-popover"
                        data-trigger="hover"
                        data-content="A modern experience using Vue.js."
                        data-placement="right"
                        data-container="body">
                        </i>
                    </p>                        
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Connectors
                        <i class="fa-solid fa-circle-question has-popover"
                        data-trigger="hover"
                        data-content="Automatically pull results directly from your tools."
                        data-placement="right"
                        data-container="body">
                        </i>
                    </p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Insights
                        <i class="fa-solid fa-circle-question has-popover"
                        data-trigger="hover"
                        data-content="Dashboards about your results, tools, and security program."
                        data-placement="right"
                        data-container="body">
                        </i>
                    </p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Data Enrichment
                        <i class="fa-solid fa-circle-question has-popover"
                        data-trigger="hover"
                        data-content="Pro automatically pulls EPSS and real-world data on the risk of your vulnerabilities for better prioritization."
                        data-placement="right"
                        data-container="body">
                        </i>
                    </p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Universal Importer
                        <i class="fa-solid fa-circle-question has-popover"
                        data-trigger="hover"
                        data-content="Add to existing CI/CD security testing process and bring visibility to your test results in Dojo."
                        data-placement="right"
                        data-container="body">
                        </i>
                    </p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Async Functions
                        <i class="fa-solid fa-circle-question has-popover"
                        data-trigger="hover"
                        data-content="From importing to deleting, Pro has the option to make key functions aysnc for speed and performance."
                        data-placement="right"
                        data-container="body">
                        </i>
                    </p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Support directly from the DefectDojo Team</p>
                    <p><i class="fa-solid fa-lg fa-circle-check"></i> Assistance with best practice and implementation</p>
                </div>
                <a href="https://cloud.defectdojo.com/accounts/onboarding/plg_step_1" target="_blank" class="btn btn-primary support commercial light">Try Pro for Free!</a>
            </div>
        </div>
    </div>
{% endblock %}